<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <div
        class="toolBox clearfix"
        style="padding-bottom: 0; padding-left: 24px"
      >
        <exportBtn
          :dataLen="tableList.length"
          api="api-s/report/export_SYS_APP"
        ></exportBtn>
        <el-button
          class="commonBut saveBtn funComBut"
          v-show="isShowAdd"
          icon="icon iconfont icontianjia"
          @click="handleAdd"
        >
          <span class="opetareText">新增应用模块</span>
        </el-button>
      </div>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column
          prop="id"
          label="应用模块ID"
          align="center"
          :formatter="formatTd"
        ></el-table-column> -->
          <el-table-column label="应用模块ID" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.id"
                :columnName="'id'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column
          prop="remark"
          label="介绍说明"
          align="center"
          :formatter="formatTd"
        ></el-table-column> -->
          <el-table-column label="介绍说明" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="200">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="editPermission(scope.row)"
                v-show="isShowUpdate"
                >编辑</el-link
              >
              <el-link
                type="primary"
                @click="toDel(scope.row.id)"
                v-show="isShowDel"
                >删除</el-link
              >
              <span v-show="!isShowDel && !isShowUpdate">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <el-dialog
        :title="addOrEdit == 0 ? '增加应用模块' : '修改应用模块'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        @close="closeDialog"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="formData"
          :rules="formRules"
          ref="form"
          label-width="120px"
        >
          <el-form-item prop="name" label="应用模块名称">
            <el-input
              v-model.trim="formData.name"
              placeholder="请输入应用模块名称"
              class="input"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="介绍说明">
            <el-input
              type="textarea"
              v-model.trim="formData.remark"
              autocomplete="off"
              placeholder="请输入介绍"
              maxlength="200"
              show-word-limit
              rows="5"
              class="input"
              clearable
              style="height: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item prop="sortCode" label="排序">
            <el-input-number
              v-model="formData.sortCode"
              :min="0"
              :max="999999999"
              placeholder="请输入输入大于等于0的整数序号"
            ></el-input-number>
            <span>（值越大越靠前）</span>
          </el-form-item>
          <el-form-item prop="icon" label="菜单图标">
            <span
              v-show="!formData.icon"
              @click="isShowIcon = 'true'"
              style="cursor: pointer"
              >请点击选择菜单图标</span
            >
            <i
              :class="formData.icon"
              v-show="formData.icon"
              @click="isShowIcon = 'true'"
              style="cursor: pointer"
            ></i>
            <div class="iconList">
              <iconList @getData="getData" v-show="isShowIcon"></iconList>
            </div>
          </el-form-item>
          <el-form-item prop="code" label="应用模块编码">
            <el-input
              v-model="formData.code"
              autocomplete="off"
              placeholder="请输入应用模块编码"
              class="input"
              clearable
              :disabled="addOrEdit == 1"
            ></el-input>
          </el-form-item>
          <div style="text-align: right"></div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancelSave" class="cancel">取消</el-button>
          <el-button
            type="primary"
            @click.native="savePermission"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import iconList from '@/components/publicCom/iconList'

export default {
  name: 'systemApplication',
  mixins: [scrollTable],
  components: {
    iconList,
  },
  data() {
    var checkIcon = (rule, value, callback) => {
      this.$nextTick(function () {
        if (!this.formData.icon) {
          return callback(new Error('请选择菜单图标'))
        } else {
          callback()
        }
      })
    }
    return {
      action: 'show',
      titleText: '应用模块',
      titleExplain: '',
      loading: true,
      isShow: false,
      tableList: [],
      requestUrl: '/api-m/app/listforpage',
      filterField: {
        // name: ""
      },
      dialogVisible: false,
      formData: {
        id: '',
        name: '',
        icon: '',
        sortCode: '',
        remark: '',
        code: '',
      },
      formRules: {
        name: {
          required: true,
          min: 1,
          max: 20,
          message: '最长允许输入20个字',
          trigger: 'blur',
        },
        icon: {
          required: true,
          validator: checkIcon,
          // message: "请输入菜单图标",
          trigger: 'blur',
        },
        sortCode: {
          required: true,
          pattern: /(^[1-9]\d*$)/,
          message: '请输入大于等于0的整数',
          trigger: 'blur',
        },
        remark: {
          required: true,
          message: '请输入介绍',
          trigger: 'blur',
        },
        code: {
          required: true,
          pattern: /^[_a-zA-Z0-9]{1,20}$/,
          message: '请输入1-20位数字，字母，下划线组成的字符',
          trigger: 'blur',
        },
      },
      addOrEdit: 0,
      canLogin: false,
      isShowIcon: false,
      isShowDel: '',
      isShowUpdate: '',
      isShowAdd: '',
    }
  },
  created() {},
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.$refs.pagination.getTableListData()
    })
    this.isShowAdd = this.$store.state.buttonLimitsArr.indexOf('app:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('app:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('app:delete') > -1
  },
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    handleAdd() {
      // this.action = "add";
      this.addOrEdit = 0
      this.dialogVisible = true
      this.isShowIcon = false
      this.formData.id = ''
      this.formData.name = ''
      this.formData.icon = ''
      this.formData.sortCode = ''
      this.formData.remark = ''
      this.formData.code = ''
    },
    getData(data) {
      this.formData.icon = data
      this.isShowIcon = false
    },
    // 搜索
    searchList() {
      var that = this
      this.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    cancelSave() {
      // this.action = "show";
      this.dialogVisible = false
    },
    editPermission(row) {
      // this.action = "edit";
      this.addOrEdit = 1
      this.dialogVisible = true
      this.isShowIcon = false
      //   var { id, name, code, order, introduction } = row;
      // var { id, projectName } = row;
      this.formData.id = row.id
      this.formData.name = row.name
      this.formData.icon = row.icon
      this.formData.sortCode = row.sortCode
      this.formData.remark = row.remark
      this.formData.code = row.code
    },
    toDel(id) {
      this.$confirm('确认删除?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.del(id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    del(id) {
      this.axios({
        method: 'post',
        url: '/api-m/app/delete',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //关闭弹窗
    closeDialog() {
      this.$refs.form.resetFields()
      this.formData = {
        id: '',
        name: '',
        icon: '',
        sortCode: '',
        remark: '',
        code: '',
      }
    },
    savePermission() {
      this.canLogin = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.toSave()
          // this.$message({
          //   message: "保存成功",
          //   type: "success"
          // });
          // this.action = "show";
          // this.dialogVisible = false;
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    toSave() {
      var url = ''
      if (this.addOrEdit == '0') {
        url = '/api-m/app/add'
      } else {
        url = '/api-m/app/update'
      }
      this.axios({
        method: 'post',
        url: url,
        data: this.formData,
      })
        .then(
          (response) => {
            this.canLogin = false
            if (!response.data.hasError) {
              // var text = "";
              // if(this.addOrEdit == "0"){
              //   text = "/api-u/action/add";
              // }else{
              //   text = "/api-u/action/edit";
              // }
              this.$message({
                message: this.addOrEdit == '1' ? '添加成功' : '编辑成功',
                type: 'success',
              })
              this.dialogVisible = false
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.canLogin = false
          }
        )
        .catch((error) => {
          this.canLogin = false
        })
    },
  },
}
</script>

<style scoped lang="less">
.operation {
  float: right;
  padding: 8px 12px 8px 12px;
  border-radius: 5px;
  background: rgb(0, 174, 255);
  color: white;
  font: 14px SourceHanSansCN-Medium;
  cursor: pointer;
}
.input {
  width: 90%;
  height: 20px;
  font: 14px SourceHanSansCN-Medium;
}
.iconList {
  max-height: 250px;
  overflow: auto;
  border: 1px solid #eee;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 36px;
  background: #fff;
  z-index: 1000;
}
.toolBox {
  margin-bottom: 24px;
}
</style>
